<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>散标</title>
    <!--  VUE -->
    <script src="../../resources/lib/js/vue.js"></script>
    <!-- elementUI -->
    <link rel="stylesheet" href="../../resources/lib/css/index.css">
    <script src="../../resources/lib/js/index.js"></script>
    <!--<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link href="https://cdn.bootcss.com/element-ui/2.4.11/theme-chalk/index.css" rel="stylesheet">
    <!-- axios -->
    <script src="../../resources/lib/js/axios.js"></script>
    <!-- 个人 -->
    <!--<link rel="stylesheet" href="../../resources/css/consumer/consumerCenter.css">-->
    <link rel="stylesheet" href="../../resources/css/product/loan/personBid.css">
    <link rel="stylesheet" href="../../resources/css/login.css">
    <link rel="stylesheet" href="../../resources/css/product/loan/base-ab068c2816.css"/>
    <link rel="stylesheet" href="../../resources/css/product/loan/style-600282d98c.css"/>
    <script src="../../resources/js/ProductConfig.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
        #sk span {
            color: #ffffff; !important;
            font-family: 'Microsoft YaHei';
        }
        a {
            text-decoration: none;
        }
        a:hover {
            text-decoration: none;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="wrapper">
        <!-- 头部 -->
        <div id="header">
            <!-- 放入主图 用来居中 -->
            <div id="header_main">
                <!-- logo -->
                <div id="logo">
                    <img src="../../resources/images/logo/logo-youse-lo.png" height="150" width="300"/>
                </div>
                <!-- 导航菜单 -->
                <div id="nav">
                    <ul>
                        <li v-for="(item, index) in nav" :key="index">
                            <a v-cloak target="_blank" :href="item.url">{{item.title}}</a>
                        </li>
                    </ul>
                </div>
                <!-- 用户信息简单展示 -->
                <!-- 登录入口 -->
                <div v-cloak id="user">
                    <a v-if="loginBtn" @click="visitLogin = true" class="sk-login" href="javascript:;">登录</a>
                    <div id="userInfo" v-if="isLogin">
                        <div class="user-info">
                            <img class="hat_index" src="../../resources/images/tou.png"/>
                        </div>
                        <div id="user-topbar-info" style="z-index: 99;">
                            <!-- 头部 -->
                            <div class="user-info-header">
                                用户：<span>{{userInfo.username}}</span>
                                <p>
                                    <span>未实名认证</span>
                                </p>
                            </div>
                            <!-- 主体 -->
                            <div class="user-info-middle"></div>
                            <!-- 底部 -->
                            <div class="user-info-footer">
                                <div class="user-info-footer-left">
                                    <a href="/consumerCenter">个人中心</a>
                                </div>
                                <div class="user-info-footer-right">
                                    <a @click="logout" href="javascript:;">
                                        <span>退出登录</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- banner -->
        <div id="banner">
            <!--<img src="../../resources/images/banner/jk_banner1.jpg" alt="">-->
        </div>

        <!-- 主要内容 -->
        <div id="content">
            <div id="content-box">
                <!--在这里写页面标签-->
                <!--产品列表导航-->
                <div class="product-menu-contanier" id="productMenu">
                    <ul v-cloak="" class="product-menu clearfix">
                        <li>
                            <a href="javascript:;" id="menu_optimize">安心投 (<em id="optimizeCount">0</em>)</a>
                        </li>
                        <li>
                            <a href="" id="menu_common">散标 (<em id="commonCount">{{pageInfo.dataTotal}}</em>)</a>
                        </li>
                        <li>
                            <a href="javascript:;" id="menu_transfer">转让专区 (<em id="transferCount">0</em>)</a>
                        </li>
                    </ul>
                </div>
                <!-- body内容 -->
                <div class="main">
                    <div class="container" id="contanier">
                        <div class="filtrate" id="filtrateModel">
                            <div class="content">
                                <dl data-key="term" class="term">
                                    <dt>项目期限：</dt>
                                    <dd class="first-label active"><a @click="productTerm"
                                                                      href="javascript:;" data-val="0">不限</a>
                                    </dd>
                                    <dd><a @click="productTerm" href="javascript:;" data-val="1" data-min="0"
                                           data-max="3">3个月以下</a>
                                    </dd>
                                    <dd><a @click="productTerm" href="javascript:;" data-val="2" data-min="3"
                                           data-max="6">3-6个月</a>
                                    </dd>
                                    <dd><a @click="productTerm" href="javascript:;" data-val="3" data-min="6"
                                           data-max="9">6-9个月</a>
                                    </dd>
                                    <dd><a @click="productTerm" href="javascript:;" data-val="4" data-min="9"
                                           data-max="12">9-12个月</a></dd>
                                    <dd><a @click="productTerm" href="javascript:;" data-val="5" data-min="12"
                                           data-max="">12个月以上</a>
                                    </dd>
                                </dl>
                                <dl data-key="annualRate" class="annualRate">
                                    <dt>参考利率：</dt>
                                    <dd class="first-label active"><a @click="annualRate"
                                                                      href="javascript:;" data-val="0">不限</a>
                                    </dd>
                                    <dd><a @click="annualRate" href="javascript:;" data-val="1" data-min="0"
                                           data-max="8">8.00%以下</a>
                                    </dd>
                                    <dd><a @click="annualRate" href="javascript:;" data-val="2" data-min="8"
                                           data-max="10">8.00-10.00%</a></dd>
                                    <dd><a @click="annualRate" href="javascript:;" data-val="3" data-min="10"
                                           data-max="12">10.00-12.00%</a>
                                    </dd>
                                    <dd><a @click="annualRate" href="javascript:;" data-val="4" data-min="12"
                                           data-max="">12.00%以上</a></dd>
                                </dl>
                                <dl data-key="repayMode" class="repayMode">
                                    <dt>还款方式：</dt><!--0-一次性还款，1-等额本息，2-等额本金，3-先息后本，4-等额本息N-1，5-每月还本付息，6-按期还本付息）-->
                                    <dd class="first-label active"><a @click="repayMode" href="javascript:;"
                                                                      data-val="0">不限</a></dd>
                                    <dd class=""><a @click="repayMode" href="javascript:;" data-val="1">等额本息</a></dd>
                                    <dd class=""><a @click="repayMode" href="javascript:;" data-val="2">等额本金</a></dd>
                                </dl>
                                <dl data-key="surplusAmount" class="surplusAmount">
                                    <dt>剩余金额：</dt>
                                    <dd class="first-label active"><a @click="remainAmount" href="javascript:;"
                                                                      data-val="0">不限</a>
                                    </dd>
                                    <dd><a @click="remainAmount" href="javascript:;" data-val="1" data-min=""
                                           data-max="5000">5千以内</a></dd>
                                    <dd><a @click="remainAmount" href="javascript:;" data-val="2" data-min="5000"
                                           data-max="20000">5千－2万</a>
                                    </dd>
                                    <dd><a @click="remainAmount" href="javascript:;" data-val="3" data-min="20000"
                                           data-max="50000">2万－5万</a>
                                    </dd>
                                    <dd><a @click="remainAmount" href="javascript:;" data-val="4" data-min="50000"
                                           data-max="">5万以上</a></dd>
                                </dl>
                            </div>
                        </div>
                        <div class="content">
                            <a name="listStart" class="list-start"></a>
                            <div class="list-main">
                                <div class="sorting" id="sortingModel">
                                    <span @click="normalSort" ref="normalSort" class="sort active" data-val="0"
                                          data-sorttype="0" style="width: 220px; display: inline-block;">默认</span>
                                    <span @click="annualRateSort" ref="annualRateSort" class="sort" data-val="1"
                                          data-sorttype="1"  style="display: inline-block; width: 100px">参考利率<i class="icon icon-down"></i></span>
                                    <span @click="termSort" ref="termSort" class="sort" data-val="2" data-sorttype="2" style="display: inline-block; width: 100px">期限<i
                                            class="icon icon-down"></i></span>
                                    <span @click="leftAmountSort" ref="leftAmountSort" class="sort" data-val="3"
                                          data-sorttype="4" id="leftAmountSort" style="display: inline-block; width: 90px">剩余金额<i
                                            class="icon icon-down"></i></span>
                                </div>
                                <div id="list">
                                    <div v-cloak="" class="list" id="listModel">

                                        <div v-for="item in productInfo" class="item sell-out" data-href="">
                                            <div class="info">
                                                <dl class="title">
                                                    <dt>{{item.product_name}}</dt>
                                                    <dd>
                                                        <a href="javascript:;" title="消费贷D20190116-a2" class="name">{{item.borrow_number}}</a>
                                                    </dd>
                                                </dl>
                                                <dl class="earnings">
                                                    <dt>{{item.lending_rate}}<span>%</span></dt>
                                                    <dd>参考利率<i class="icon icon-question risk-tips"
                                                               title="华金宝P2P互联网金融平台所有项目参考利率是在参考同类型工具历史数据得出，<br>并不代表实际收益，市场有风险，出借需谨慎。"></i>
                                                    </dd>
                                                </dl>
                                                <dl class="limit">
                                                    <dt>{{item.bidding_time_limit}}个月<i class="text-tag">1个月可转</i></dt>
                                                    <dd>期限</dd>
                                                </dl>
                                                <dl class="starting-amount">
                                                    <dt>{{item.surplus_amount}}.00元</dt>
                                                    <dd>剩余金额</dd>
                                                </dl>
                                                <dl class="build-date">
                                                    <dt>{{item.repayMode}}</dt>
                                                    <dd>还款方式</dd>
                                                </dl>
                                                <dl id="sk" class="operate trading">
                                                    <!--<dd>成功交易时间</dd>-->
                                                    <!--<dd class="datetime">2019-01-16</dd>-->

                                                    <dd v-if="item.surplus_amount>0">
                                                        <a target="_blank" :href="'/product/loan/common/' + item.id"><el-button type="primary">立即投标</el-button></a>
                                                    </dd>
                                                    <dd v-if="!item.surplus_amount>0">
                                                        <img src="../../../resources/images/sellout-c3896bad67.png" width="120px"/>
                                                    </dd>
                                                </dl>
                                            </div>
                                        </div>


                                    </div>
                                </div>
                                <div id="page">
                                    <div class="page-block">
                                        <el-pagination
                                                layout="total, prev, pager, next, jumper"
                                                :current-page="queryParameter.pageCurrent"
                                                :page-size="queryParameter.pageSize"
                                                :total="pageInfo.dataTotal"
                                                @current-change="handleCurrentChange"
                                        ></el-pagination>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 脚部 -->
        <div id="foot">
            <div class="sk-foot-main clear">
                <div class="sk-foot-left left">
                    <div class="n-link">
                        <a href="http://www.itrust.org.cn/home/index/itrust_certifi/wm/19671944XX.html" target="_blank">
                            <img src="../../resources/images/foot/index-integrity-icon.png" alt="">
                        </a>
                        <a href="http://gawa.bjchy.gov.cn/websearch/" target="_blank">
                            <img src="../../resources/images/foot/jingcha.png" alt="">
                        </a>
                        <a href="https://trustsealinfo.websecurity.norton.com/splash?form_file=fdf/splash.fdf&amp;dn=*.9fgroup.com&amp;lang=zh_cn"
                           target="_blank">
                            <img src="../../resources/images/foot/norton.png" alt="">
                        </a>
                        <a href="http://webscan.360.cn/index/checkwebsite/url/www.9fgroup.com"
                           name="6d18753f3a834479ee835f4f9bc009ec">
                            <img src="../../resources/images/foot/360.png" alt="">
                        </a>
                        <a id="_pingansec_bottomimagelarge_p2p"
                           href="http://si.trustutn.org/info?sn=420180312000632784551&amp;certType=4">
                            <img src="../../resources/images/foot/p2p_official_large.jpg">
                        </a>
                    </div>
                    <p>Copyright©2018-2019 <span>华金宝个人学习项目使用</span> <a href="http://http://www.miitbeian.gov.cn">豫ICP备18045023号-1</a>
                    </p>

                </div>
                <dl class="right">
                    <dt><img src="../../resources/images/foot/huajinbao.png" alt=""></dt>
                    <dd>
                        <div class="sk-icon">
                            <a target="_blank" href="javascript;;">
                                <i class="fa fa-github fa-lg" aria-hidden="true"></i>
                            </a>
                            <a target="_blank" href="javascript;;">
                                <i class="fa fa-qq fa-lg" aria-hidden="true"></i>
                            </a>
                        </div>
                        <p class="n-text">QQ群：</p>
                        <p class="n-tel">965903855
                            <small>9:30-21:00</small>
                        </p>
                    </dd>
                </dl>
            </div>
        </div>

        <!--侧面固定工具条-->
        <div id="ly-side-bar" style="left: 81.5292%; bottom: 0px; margin-bottom: 120px;" class="ly-side-bar side-bar-xn">
            <a href="javascript:;" class="side-bar-app"></a>
            <a href="javascript:;" class="side-bar-interest"></a>
            <a href="javascript:;" class="side-bar-kefu" data-callback="kefu"></a>
            <a href="javascript:;" class="side-bar-calculator" data-callback="calculator"></a>
            <a href="javascript:;" class="side-bar-wenjuan" data-callback="wenjuan"></a>
            <a onclick="backTop()" href="javascript:;" class="side-bar-top" data-callback="top"></a>
        </div>
    </div>


    <!----------------------------------------- 弹出层 ----------------------------------------->
    <div v-cloak>
        <!-- 登录层 -->
        <el-dialog
                :visible.sync="visitLogin"
                width="520px"
                :close-on-click-modal="false"
                :lock-scroll="false"
                :before-close="loginDialogClose"
                center>
            <div slot="title" id="user-login-header">
                <img src="../../resources/images/logo/510-220-font-logo.png" alt="">
            </div>
            <div id="user-login">
                <div id="user-login-main">
                    <div class="with-line with-line-a">使用手机号/用户名登录</div>
                    <div class="user-input">
                        <input v-model="loginInfo.username" id="loginUsername" name="loginUsername"
                               class="sk-user-input-style" placeholder="输入手机号或用户名"/>
                        <input v-model="loginInfo.password" @keyup.enter="login" id="loginPassword" name="loginPassword"
                               class="sk-user-input-style" placeholder="密码"/>
                        <a @click="login" class="sk-user-btn" href="javascript:;">
                            <span>登录</span>
                        </a>
                    </div>
                </div>
            </div>
            <!-- footer -->
            <div slot="footer" id="user-login-foot">
                <div id="sk-login-cc">
                    <div class="sk-login-forget">
                        <a @click="toForget" href="javascript:;">忘记密码»</a>
                    </div>
                    <div class="sk-login-register">
                        <span>还没有账号？</span><a @click="toRegister" href="javascript:;">点击注册»</a>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 注册层 -->
        <el-dialog
                :visible.sync="visitRegister"
                width="520px"
                :close-on-click-modal="false"
                :lock-scroll="false"
                :before-close="registerDialogClose"
                center>
            <div slot="title" id="user-register-header">
                <img src="../../resources/images/logo/510-220-font-logo.png" alt="">
            </div>
            <div id="user-register">
                <div id="user-register-main">
                    <div class="with-line with-line-a">注册</div>
                    <div class="user-input">
                        <input v-model="registerInfo.username" id="regUsername" name="regUsername"
                               class="sk-user-input-style" placeholder="用户名" maxlength="20"/>
                        <div id="sk-register-send-code">
                            <input v-model="registerInfo.phone" id="regPhone" name="regPhone"
                                   class="sk-user-input-style"
                                   placeholder="手机号码" maxlength="11"/>
                            <a v-show="visitSendMessage" @click="sendMessage" href="javascript:;">发送验证码</a>
                            <a v-show="!visitSendMessage"><span>{{lastTime}}</span>秒后发送短信</a>
                        </div>
                        <input @blur="verifyCode" v-model="registerInfo.code" id="regCode" name="regCode"
                               class="sk-user-input-style sk-register-regCode" placeholder="验证码" maxlength="6"/>
                        <input v-model="registerInfo.password" id="regPassword" name="regPassword" type="password"
                               class="sk-user-input-style"
                               placeholder="密码" maxlength="20"/>
                        <input v-model="registerInfo.repassword" @keyup.enter="register" id="regRePassword"
                               name="regRePassword" type="password" class="sk-user-input-style"
                               placeholder="确认密码" maxlength="20"/>
                        <a @click="register" class="sk-user-btn" href="javascript:;">
                            <span>注册</span>
                        </a>
                    </div>
                </div>
            </div>
            <div slot="footer" id="user-register-foot">
                <div id="sk-register-cc">
                    <div class="sk-register-to-login">
                        <span>已有账号？</span><a @click="toLogin" href="javascript:;">点击登录»</a>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 找回密码层 -->
        <el-dialog
                :visible.sync="visitForget"
                width="520px"
                :close-on-click-modal="false"
                :lock-scroll="false"
                :before-close="forgetDialogClose"
                center>
            <div slot="title" id="user-forget-header">
                <img src="../../resources/images/logo/510-220-font-logo.png" alt="">
            </div>
            <div id="user-forget">
                <div id="user-forget-main">
                    <div class="with-line with-line-a">找回密码</div>
                    <div class="user-input">
                        <input v-model="forgetInfo.phone" id="forgetPhone" name="forgetPhone"
                               class="sk-user-input-style"
                               placeholder="手机号码"/>
                        <a @click="toForget" class="sk-user-btn" href="javascript:;">
                            <span>重置</span>
                        </a>
                    </div>
                </div>
            </div>
            <div slot="footer" id="user-forget-foot">

            </div>
        </el-dialog>
        <!-- 弹出层 -->
    </div>


</div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            nav: [
                {title: '首页', url: '/'},
                {title: '我要出借', url: '/product/loan'},
                {title: '我要借款', url: '/product/borrow'},
                {title: '信息披露', url: '#'},
                {title: '关于我们', url: '#'}
            ],
            lastTime: 60,
            loginInfo: {},
            registerInfo: {},
            forgetInfo: {},
            visitLogin: false,
            visitRegister: false,
            visitForget: false,
            visitSendMessage: true,
            loginBtn: false,
            isLogin: false,
            userInfoBar: false,
            userInfo: {},
            normalSortControl: 1,
            annualRateSortControl: 0,
            termSortControl: 0,
            leftAmountSortControl: 0,
            queryParameter: {
                pageSize: PERSION_BID.PAGE.SIZE,
                pageCurrent: PERSION_BID.PAGE.NOW
            },
            pageInfo: {
            },
            productInfo: [],
            productResult: true

        },
        watch: {
            normalSortControl: {
                handler: function (val, oldVal) {
                    normalSortControl(val, oldVal)
                },
                deep: true
            },
            annualRateSortControl: {
                handler: function (val, oldVal) {
                    annualRateSortControl(val, oldVal)
                },
                deep: true
            },
            termSortControl: {
                handler: function (val, oldVal) {
                    termSortControl(val, oldVal)
                },
                deep: true
            },
            leftAmountSortControl: {
                handler: function (val, oldVal) {
                    leftAmountSortControl(val, oldVal)
                },
                deep: true
            }
        },
        methods: {
            toForget: function () {
                app.visitRegister = false
                app.visitLogin = false
                app.visitForget = true
                app.forgetInfo = {}
            },
            toRegister: function () {
                app.visitForget = false
                app.visitLogin = false
                app.visitRegister = true
                app.registerInfo = {}
            },
            toLogin: function () {
                app.visitForget = false
                app.visitRegister = false
                app.visitLogin = true
                app.loginInfo = {}
            },
            login: function () {
                login()
            },
            logout: function () {
                logout()
            },
            register: function () {
                register()
            },
            loginDialogClose: function (done) {
                setTimeout(_ => {
                    initAllDialogInfo()
                }, 100)
                done()
            },
            registerDialogClose: function (done) {
                setTimeout(_ => {
                    initAllDialogInfo()
                }, 100)
                done()
            },
            forgetDialogClose: function (done) {
                setTimeout(_ => {
                    initAllDialogInfo()
                }, 100)
                done()
            },
            sendMessage: function () {
                sendRegisterSmsCode()
            },
            verifyCode: function () {
                verifyCode()
            },
            productTerm: function () {
                active()
                loadProduct()
            },
            annualRate: function () {
                active()
                loadProduct()
            },
            repayMode: function () {
                active()
                loadProduct()
            },
            remainAmount: function () {
                active()
                loadProduct()
            },
            normalSort: function () {
                normalSort()
            },
            annualRateSort: function () {
                annualRateSort()
            },
            termSort: function () {
                termSort()
            },
            leftAmountSort: function () {
                leftAmountSort()
            },
            handleCurrentChange: function(val) {
                this.queryParameter.pageCurrent = val
                console.log(app.queryParameter)
                loadProduct()
            }
        }
    })
</script>

<script>
    window.onload = function () {
        initUser()
        loadProduct()
    }

    function verifyCode() {
        axios({
            method: 'post',
            url: '/consumer/register/verifyCode',
            data: app.registerInfo
        }).then(function (response) {

        })
    }

    function sendRegisterSmsCode() {
        axios({
            method: 'post',
            url: '/consumer/register/sendMessage',
            data: app.registerInfo
        }).then(function (response) {
            app.visitSendMessage = false
            app.lastTime = 60
            var time = setInterval(function () {
                app.lastTime--
                console.log(app.lastTime)
                if (app.lastTime <= 0) {
                    app.visitSendMessage = true
                    clearInterval(time)
                }
            }, 1000)
        })
    }

    function register() {
        axios({
            method: 'post',
            url: '/consumer/register/verifyCode',
            data: app.registerInfo
        }).then(function (response) {
            visitAllDialog(false)
        })
    }

    function logout() {
        axios({
            method: 'post',
            url: '/consumer/logout'
        }).then(function (response) {
            app.isLogin = false
            app.loginBtn = true
            initAllDialogInfo()
            initUserInfo()
        })
    }

    function login() {
        axios({
            method: 'post',
            url: '/consumer/login',
            data: app.loginInfo
        }).then(function (response) {
            app.userInfo.username = response.data.object.username
            app.userInfo.id = response.data.object.consumerId
            app.visitLogin = false // 隐藏登录窗口
            app.loginBtn = false // 隐藏登录按钮
            app.isLogin = true // 已登录
            initAllDialogInfo()
        });
    }

    function visitAllDialog(boolean) {
        visitLogin(boolean)
        visitRegister(boolean)
        visitForget(boolean)
    }

    function visitForget(boolean) {
        app.visitForget = boolean
    }

    function visitRegister(boolean) {
        app.visitRegister = boolean
    }

    function visitLogin(boolean) {
        app.visitLogin = boolean
    }

    function initUserInfo() {
        app.userInfo = {}
    }

    function initAllDialogInfo() {
        initLoginInfo()
        initRegisterInfo()
        initForgetInfo()
    }

    function initLoginInfo() {
        app.loginInfo = {}
    }

    function initRegisterInfo() {
        app.registerInfo = {}
    }

    function initForgetInfo() {
        app.forgetInfo = {}
    }

    function initUser() {
        axios({
            method: 'post',
            url: '/consumer/getUserInfoAfterLogin'
        }).then(function (response) {
            console.log(response)
            if (response.data.user != null) {
                // 已登录
                app.userInfo = response.data.user[0]
                app.loginBtn = false
                app.isLogin = true
            } else {
                // 未登录
                app.isLogin = false
                app.loginBtn = true
            }
        })
    }
</script>

<script>
    /**默认排序按钮被按下**/
    function normalSort() {
        // 隐藏其余
        initSortController(1)
        initParameterSort()
        app.normalSortControl = 1
        // monitorSorController()

    }

    /**参考利率排序按钮被按下  0：关闭，1：降序，2：升序**/
    function annualRateSort() {
        // 显示参考利率
        initSortController(2)
        initParameterSort()
        var flag = app.annualRateSortControl

        if (flag == 0) {
            // 点击后默认是降序
            app.annualRateSortControl = 1
        } else if (flag == 1) {
            app.annualRateSortControl = 2
        } else if (flag == 2) {
            app.annualRateSortControl = 1
        }
        // monitorSorController()
        for (key in app.queryParameter) {
            console.log(key)
        }

    }

    /**期限排序按钮被按下**/
    function termSort() {
        initSortController(3)
        initParameterSort()
        var flag = app.termSortControl
        if (flag == 0) {
            // 点击后默认是降序
            app.termSortControl = 1
        } else if (flag == 1) {
            app.termSortControl = 2
        } else if (flag == 2) {
            app.termSortControl = 1
        }
        // monitorSorController()
    }

    /**剩余金额排序按钮 被按下**/
    function leftAmountSort() {
        initSortController(4)
        initParameterSort()
        var flag = app.leftAmountSortControl
        if (flag == 0) {
            // 点击后默认是降序
            app.leftAmountSortControl = 1
        } else if (flag == 1) {
            app.leftAmountSortControl = 2
        } else if (flag == 2) {
            app.leftAmountSortControl = 1
        }
        // monitorSorController()
    }

    /**默认排序状态 监听函数**/
    function normalSortControl(val, oldVal) {
        // 默认
        // console.log('默认 - 当前 ：%s，修改前：%s', val, oldVal)
        switch (val) {
            case 0:
                // 关闭自己就可以了
                app.$refs.normalSort.classList.remove('active')
                break;
            case 1: // 默认按钮被打开 重置其他按钮/默认
                app.$refs.normalSort.classList.add('active')
                // set request sort default
                initParameterSort()
                app.queryParameter.normalSort = PERSION_BID.SORT.DEFAULT.OPEN /**设置默认排序的请求参数**/
                break;
        }
        loadProduct()
    }

    /**参考年利率排序状态的监听函数**/
    function annualRateSortControl(val, oldVal) {
        // 参考利率
        console.log('参考利率 - 当前 ：%s，修改前：%s', val, oldVal)
        switch (val) {
            case 0:
                // 重置active操作
                app.$refs.annualRateSort.classList.remove('active')
                // 重置图标操作
                app.$refs.annualRateSort.lastChild.classList.remove('icon-down-active')
                app.$refs.annualRateSort.lastChild.classList.remove('icon-up-active')
                app.$refs.annualRateSort.lastChild.classList.add('icon-down')
                break;
            case 1: // 降序
                // 重置active操作
                app.$refs.annualRateSort.classList.add('active')
                // 重置图标
                app.$refs.annualRateSort.lastChild.classList.remove('icon-down')
                app.$refs.annualRateSort.lastChild.classList.remove('icon-up-active')
                app.$refs.annualRateSort.lastChild.classList.add('icon-down-active')
                // 设置排序请求的参数
                initParameterSort()
                app.queryParameter.annualRateSort = PERSION_BID.SORT.ANNUAL_RATE.DESC
                break;
            case 2: // 升序
                // 重置active
                app.$refs.annualRateSort.classList.add('active')
                app.$refs.annualRateSort.lastChild.classList.remove('icon-down')
                app.$refs.annualRateSort.lastChild.classList.remove('icon-down-active')
                app.$refs.annualRateSort.lastChild.classList.add('icon-up-active')
                // 设置排序请求的参数 升序
                initParameterSort()
                app.queryParameter.annualRateSort = PERSION_BID.SORT.ANNUAL_RATE.ASC
                break;

        }
        loadProduct()
    }

    /**期限排序状态按钮的监听函数**/
    function termSortControl(val, oldVal) {
        // 控制 期限
        // console.log('期限 - 当前 ：%s，修改前：%s', val, oldVal)
        switch (val) {
            case 0:
                // 重置
                app.$refs.termSort.classList.remove('active')
                // 图标
                app.$refs.termSort.lastChild.classList.remove('icon-down-active')
                app.$refs.termSort.lastChild.classList.remove('icon-up-active')
                app.$refs.termSort.lastChild.classList.add('icon-down')
                break;
            case 1:
                // 重置
                app.$refs.termSort.classList.add('active')
                // 图标
                app.$refs.termSort.lastChild.classList.remove('icon-down')
                app.$refs.termSort.lastChild.classList.remove('icon-up-active')
                app.$refs.termSort.lastChild.classList.add('icon-down-active')
                // 设置排序的请求参数
                initParameterSort()
                app.queryParameter.termSort = PERSION_BID.SORT.TERM.DESC
                break;
            case 2:
                // 重置
                app.$refs.termSort.classList.add('active')
                // 图标i
                app.$refs.termSort.lastChild.classList.remove('icon-down')
                app.$refs.termSort.lastChild.classList.remove('icon-down-active')
                app.$refs.termSort.lastChild.classList.add('icon-up-active')
                // 设置排序的请求参数
                initParameterSort()
                app.queryParameter.termSort = PERSION_BID.SORT.TERM.ASC
                break;
        }
        loadProduct()
    }

    /**剩余金额排序状态的监听函数**/
    function leftAmountSortControl(val, oldVal) {
        // 剩余金额
        // console.log('剩余金额 - 当前 ：%s，修改前：%s', val, oldVal)
        switch (val) {
            case 0:
                // 重置
                app.$refs.leftAmountSort.classList.remove('active')
                // init icon
                app.$refs.leftAmountSort.lastChild.classList.remove('icon-down-active')
                app.$refs.leftAmountSort.lastChild.classList.remove('icon-up-active')
                app.$refs.leftAmountSort.lastChild.classList.add('icon-down')
                break;
            case 1:
                // init span
                app.$refs.leftAmountSort.classList.add('active')
                // init icon
                app.$refs.leftAmountSort.lastChild.classList.remove('icon-down')
                app.$refs.leftAmountSort.lastChild.classList.remove('icon-up-active')
                app.$refs.leftAmountSort.lastChild.classList.add('icon-down-active')
                // set sort request parameter
                initParameterSort()
                app.queryParameter.surplusAmountSort = PERSION_BID.SORT.LEFT_ANNUAL.DESC
                break;
            case 2:
                // init span
                app.$refs.leftAmountSort.classList.add('active')
                // init icon
                app.$refs.leftAmountSort.lastChild.classList.remove('icon-down')
                app.$refs.leftAmountSort.lastChild.classList.remove('icon-down-active')
                app.$refs.leftAmountSort.lastChild.classList.add('icon-up-active')
                // set sort request parameter
                initParameterSort()
                app.queryParameter.surplusAmountSort = PERSION_BID.SORT.LEFT_ANNUAL.ASC
                break;
        }
        loadProduct()
    }

    /**初始化排序请求参数**/
    function initParameterSort() {
        delete app.queryParameter.normalSort
        delete app.queryParameter.annualRateSort
        delete app.queryParameter.termSort
        delete app.queryParameter.surplusAmountSort
    }

    // 输出各按钮的状态
    function monitorSorController() {
        console.log('默认：' + app.normalSortControl, '参考利率：' + app.annualRateSortControl, '期限：' + app.termSortControl, '剩余金额：' + app.leftAmountSortControl)
    }

    // 初始化各排序按钮的状态
    function initSortController(val) {
        switch (val) {
            case 1:
                // 默认按钮按下
                app.annualRateSortControl = 0
                app.termSortControl = 0
                app.leftAmountSortControl = 0
                break;
            case 2:
                // 参考利率按钮按下
                app.normalSortControl = 0
                app.termSortControl = 0
                app.leftAmountSortControl = 0
                break;
            case 3:
                // 期限按钮被按下
                app.normalSortControl = 0
                app.annualRateSortControl = 0
                app.leftAmountSortControl = 0
                break;
            case 4:
                // 剩余金额被按下
                app.normalSortControl = 0
                app.annualRateSortControl = 0
                app.termSortControl = 0
                break;
        }
    }

</script>

<script>
    /**顶部搜索条件**/
    function active() {
        for (item of this.document.activeElement.parentNode.parentNode.children) {
            item.classList.remove('active')
        }
        var ele = document.activeElement
        var data = this.document.activeElement.dataset
        ele.parentElement.classList.add('active')
        queryDispatch(this.document.activeElement.parentNode.parentNode.className, this)
    }

    function queryDispatch(who, a) {
        switch (who) {
            case 'term':
                configTerm(a);
                break;
            case 'annualRate':
                configAnnualRate(a);
                break;
            case 'repayMode':
                configRepayMode(a)
                break;
            case 'surplusAmount':
                configSurplusAmount(a)
                break;

        }
    }

    function configTerm(a) {
        var data = a.document.activeElement.dataset
        var val = data.val
        delete app.queryParameter.term
        delete app.queryParameter.minTerm
        delete app.queryParameter.maxTerm
        if (val == PERSION_BID.QUERY.TERM.DEFAULT.VALUE) {
            // default
            delete app.queryParameter.term
        } else if (val == PERSION_BID.QUERY.TERM.SCOPE_OF_ONE.VALUE) {
            // three of month
            app.queryParameter.minTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_ONE.MIN
            app.queryParameter.maxTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_ONE.MAX
        } else if (val == PERSION_BID.QUERY.TERM.SCOPE_OF_TWO.VALUE) {
            app.queryParameter.minTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_TWO.MIN
            app.queryParameter.maxTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_TWO.MAX
        } else if (val == PERSION_BID.QUERY.TERM.SCOPE_OF_THREE.VALUE) {
            app.queryParameter.minTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_THREE.MIN
            app.queryParameter.maxTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_THREE.MAX
        } else if (val == PERSION_BID.QUERY.TERM.SCOPE_OF_FOUR.VALUE) {
            app.queryParameter.minTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_FOUR.MIN
            app.queryParameter.maxTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_FOUR.MAX
        } else if (val == PERSION_BID.QUERY.TERM.SCOPE_OF_FIVE.VALUE) {
            app.queryParameter.minTerm = PERSION_BID.QUERY.TERM.SCOPE_OF_FIVE.MIN
        }
    }

    function configAnnualRate(a) {
        var data = a.document.activeElement.dataset
        var val = data.val
        delete app.queryParameter.annualRate
        delete app.queryParameter.minAnnualRate
        delete app.queryParameter.maxAnnualRate
        if (val == PERSION_BID.QUERY.ANNUAL_RATE.DEFAULT.VALUE) {
            // default
            delete app.queryParameter.annualRate
        } else if (val == PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_ONE.VALUE) {
            // three of month
            app.queryParameter.minAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_ONE.MIN
            app.queryParameter.maxAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_ONE.MAX
        } else if (val == PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_TWO.VALUE) {
            app.queryParameter.minAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_TWO.MIN
            app.queryParameter.maxAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_TWO.MAX
        } else if (val == PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_THREE.VALUE) {
            app.queryParameter.minAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_THREE.MIN
            app.queryParameter.maxAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_THREE.MAX
        } else if (val == PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_FOUR.VALUE) {
            app.queryParameter.minAnnualRate = PERSION_BID.QUERY.ANNUAL_RATE.SCOPE_OF_FOUR.MIN
        }
    }

    function configRepayMode(a) {
        var data = a.document.activeElement.dataset
        var val = data.val
        delete app.queryParameter.repayType
        if (val == PERSION_BID.QUERY.REPAY_MODE.DEFAULT.VALUE) {
            // default
            delete app.queryParameter.repayType
        } else if (val == PERSION_BID.QUERY.REPAY_MODE.SCOPE_OF_ONE.VALUE) {
            // three of month
            app.queryParameter.repayType = PERSION_BID.QUERY.REPAY_MODE.SCOPE_OF_ONE.TYPE
        } else if (val == PERSION_BID.QUERY.REPAY_MODE.SCOPE_OF_TWO.VALUE) {
            app.queryParameter.repayType = PERSION_BID.QUERY.REPAY_MODE.SCOPE_OF_TWO.TYPE
        }
    }

    function configSurplusAmount(a) {
        var data = a.document.activeElement.dataset
        var val = data.val
        delete app.queryParameter.surplusAmount
        delete app.queryParameter.minSurplusAmount
        delete app.queryParameter.maxSurplusAmount
        if (val == PERSION_BID.QUERY.LEFT_AMOUNT.DEFAULT.VALUE) {
            // default
            delete app.queryParameter.surplusAmount
        } else if (val == PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_ONE.VALUE) {
            // three of month
            app.queryParameter.minSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_ONE.MIN
            app.queryParameter.maxSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_ONE.MAX
        } else if (val == PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_TWO.VALUE) {
            app.queryParameter.minSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_TWO.MIN
            app.queryParameter.maxSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_TWO.MAX
        } else if (val == PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_THREE.VALUE) {
            app.queryParameter.minSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_THREE.MIN
            app.queryParameter.maxSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_THREE.MAX
        } else if (val == PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_FOUR.VALUE) {
            app.queryParameter.minSurplusAmount = PERSION_BID.QUERY.LEFT_AMOUNT.SCOPE_OF_FOUR.MIN
        }
    }
</script>

<script>
    /****/
    function loadProduct() {
        axios({
            method: 'post',
            url: '/product/disperseBid',
            data: app.queryParameter
        }).then(function(response) {
            console.log(response)
            app.productInfo = response.data.data
            app.pageInfo.dataTotal = response.data.object
        })
    }
</script>

<script>
    function backTop() {
        var scrollToTop = window.setInterval(function() {
            var pos = window.pageYOffset;
            if ( pos > 0 ) {
                window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
            } else {
                window.clearInterval( scrollToTop );
            }
        }, 16); // how fast to scroll (this equals roughly 60 fps)
    }
</script>